<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js"></script>
    <title>下拉选择</title>
</head>

<body>
    <div id="InputsWrapper" style="margin-top: 5%;margin-left: 22%;">
        <div class="layui-form-item">
            <div class="layui-inline" style="width:300px">
                <label class="layui-form-label messageForm">指标名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="team" class="layui-input" placeholder="请输入名称">
                </div>
            </div>
        </div>
        <!-- +一行 -->
        <div class="addItem" style="height: 38px;">
            <label class="layui-form-label messageForm">指标内容：</label>
            <select name="city" lay-verify="" style="width: 190px;height: 38px;">
                <option value="001">请选择指标</option>
                <option value="002">管廊</option>
                <option value="003">管轴</option>
                <option value="004">管线</option>
            </select>
            <div style="position: relative;left: 48.2%;top: -33px;">
                <div class="layui-input-block" style="margin-left: 0;">
                    <input type="checkbox" name="like1[write]" lay-skin="primary" title="是否默认" checked="">是否默认
                    <img src="../images/add.png" id="AddMoreFileBox" class="btn btn-info" alt="">
                </div>
            </div>
            <p style="color: red;position: relative; color: red;top: 200px;left: 120px;">备注：最多添加6条指标。</p>
        </div>
    </div>
</body>
<script>
    $(document).ready(function() {

        var MaxInputs = 5; //maximum input boxes allowed  
        var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID  
        var AddButton = $("#AddMoreFileBox"); //Add button ID  

        var x = InputsWrapper.length; //initlal text box count  
        // var FieldCount = 1; //to keep track of text box added  

        $(AddButton).click(function(e) //on add input button click  
            {
                if (x <= MaxInputs) //max input box allowed  
                {
                    // FieldCount++; //text box added increment  
                    //add input box  
                    $(InputsWrapper).append('<div style="margin-top: 5px;"><label class="layui-form-label messageForm">指标内容：</label><select name="city" style="width: 190px;height: 38px;"><option value="001">请选择指标</option><option value="002">管廊</option><option value="003">管轴</option><option value="004">管线</option></select><input type="checkbox" name="like1[write]" lay-skin="primary" title="是否默认" style="margin-left: 2px;">是否默认<img src="../images/sub.png" class="removeclass" alt="" style="margin-left: 4px;"></div>');
                    x++; //text box increment  
                }
                return false;
            });

        $("body").on("click", ".removeclass", function(e) { //user click on remove text  
            if (x > 1) {
                $(this).parent('div').remove(); //remove text box  
                x--; //decrement textbox  
            }
            return false;
        })

    });
</script>

</html>